<script>
import {Socket} from "@/socket/Socket";

export default {
  name: "WSSocket",
  created() {
    this.socket = new Socket()
    this.socket.startWebSocket()
    this.createdTime()
  },
  data(){
    return {
      socket: null,
      interval: null,
      socketStatus: 0,
    }
  },
  methods: {
    createdTime() {
      this.interval = setInterval(()=>{
        if(this.socket && this.socket.socket){
          this.socketStatus = this.socket.socket.readyState
        }else{
          this.socketStatus = -1
        }
      },1000);
    }
  },
  beforeDestroy() {
    this.socket.closeWebSocket()
    this.socket = null
    clearInterval(this.interval)
    this.interval = null;
  },
}
</script>

<template>
  <div class="mgb10">
    <template v-if="socketStatus === 0">
      <el-alert
        type="warning"
      >
        <template #title>
          <i class="el-icon-loading"></i>
          服务器正在连接，请稍后...
        </template>
      </el-alert>

    </template>
    <template v-else-if="socketStatus === 1">
      <el-alert
        type="success"
      >
        <template #title>
          <i class="el-icon-success"></i>连接服务器成功。使用几何、墨家量方扫码称重一体机扫描箱唛可自动同步货件测量信息（需联系客服获取请求路由配置后使用）
        </template>
      </el-alert>
    </template>
    <template v-else-if="socketStatus === 3">
      <el-alert
        type="error"
      >
        <template #title>
          <i class="el-icon-error"></i>服务器连接失败,稍后马上重连...
        </template>
      </el-alert>
    </template>
    <template v-else>
      <el-alert
        type="error"
      >
        <template #title>
          <i class="el-icon-error">服务器连接异常,请联系技术人员</i>
        </template>
      </el-alert>
    </template>
  </div>
</template>

<style scoped lang="scss">

</style>
